// packageA/pages/MerchantIM/MerchantIM.ts
import { getMerchantById } from '../../../utils/merchantData';
import api from '../../../utils/request';

Page({

  /**
   * 页面的初始数据
   */
  data: {
    cardTop:10, // 卡片初始位置百分比
    cardStyle: 'top: 20%;', // 完整的样式字符串
    startY: 0, // 触摸开始位置
    isDragging: false, // 是否正在拖拽
    isCardDown: false, // 卡片是否处于下方位置
    currentTab: 0, // 当前选中的标签页
    tabStartX: 0, // 标签页滑动开始位置
    isTabDragging: false, // 是否正在拖拽标签页
    showDetail: false, // 是否显示详细信息弹窗
    merchant: null as any, // 商家信息
    scripts: [] as any[] // 剧本列表
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options: any) {
    if (options.merchantId) {
      const merchantId = parseInt(options.merchantId);
      // 本地商户兜底（依旧可保留基础信息）
      const merchant = getMerchantById(merchantId);
      if (merchant) {
        this.setData({
          merchant: merchant,
        });
      }
      // 重点：拉后端产品
      this.fetchProductsByMerchant(merchantId);
      // 如需展示商户名、地址、营业时间可再加下面这一句：
      this.fetchMerchantFromList(merchantId);
    }
  },

  async fetchMerchantFromList(merchantId: number) {
    try {
      const res: any = await api.getMerchantList();
      const list = Array.isArray(res?.data) ? res.data : [];
      const info = list.find((m: any) => m.id === merchantId);
      if (info) {
        this.setData({
          merchant: {
            id: info.id,
            name: info.name,
            image: this.data.merchant?.image,
            businessHours: info.openTime || this.data.merchant?.businessHours || '',
            address: info.address,
            phone: info.phone,
          }
        });
      }
    } catch (e) {
      // 静默失败，保持本地兜底
    }
  },

  async fetchProductsByMerchant(merchantId: number) {
    try {
      const res: any = await api.getProductsByMerchant(merchantId);
      const list = Array.isArray(res?.data) ? res.data : [];
      // 将后端返回的产品映射为当前页面复用的 scripts 结构
      const mapped = list.map((p: any) => ({
        id: p.id,
        name: p.name,
        image: this.data.merchant?.image || 'https://xrmini.dwtcy.com.cn/images/Merchant/MerchantIM/剧本杀.png',
        time: p.shortDesc || '',
        price: p.price,
      }));
      if (mapped.length) {
        this.setData({ scripts: mapped });
      }
    } catch (e) {
      // 静默失败，仍显示本地示例
    }
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  },

  /**
   * 触摸开始
   */
  onTouchStart(e: { touches: { clientY: any; }[]; }) {
    this.setData({
      startY: e.touches[0].clientY,
      isDragging: true
    });
  },

  /**
   * 触摸移动
   */
  onTouchMove(e: { touches: { clientY: any; }[]; }) {
    if (!this.data.isDragging) return;
    
    const currentY = e.touches[0].clientY;
    const deltaY = currentY - this.data.startY;
    
    // 计算新的位置，限制在20%到30%之间
    let newTop = 20 + (deltaY / 20); // 每20rpx移动1%
    newTop = Math.max(20, Math.min(30, newTop)); // 限制范围
    
    this.setData({
      cardTop: newTop,
      cardStyle: `top: ${newTop}%;`
    });
  },

  /**
   * 触摸结束
   */
  onTouchEnd(e: {
    changedTouches: any; touches: { clientY: any; }[]; 
}) {
    const { startY, cardTop, isCardDown } = this.data;
    const endY = e.changedTouches[0].clientY;
    const deltaY = endY - startY;
    
    this.setData({
      isDragging: false
    });
    
    // 如果移动距离很小（小于10rpx），认为是点击
    if (Math.abs(deltaY) < 10) {
      // 点击切换状态
      if (isCardDown) {
        // 当前在下方，回到上方
        this.setData({
          cardTop: 20,
          cardStyle: 'top: 20%;',
          isCardDown: false
        });
      } else {
        // 当前在上方，移到下方
        this.setData({
          cardTop: 30,
          cardStyle: 'top: 30%;',
          isCardDown: true
        });
      }
    } else {
      // 滑动操作，根据位置决定最终状态
      if (cardTop > 25) {
        // 滑动超过30%，保持在下方
        this.setData({
          cardTop: 30,
          cardStyle: 'top: 30%;',
          isCardDown: true
        });
      } else {
        // 滑动未超过30%，回到上方
        this.setData({
          cardTop: 20,
          cardStyle: 'top: 20%;',
          isCardDown: false
        });
      }
    }
  },

  /**
   * 切换标签页
   */
  switchTab(e: { currentTarget: { dataset: { index: string } } }) {
    const index = parseInt(e.currentTarget.dataset.index);
    this.setData({
      currentTab: index
    });
  },

  /**
   * 标签页触摸开始
   */
  onTabTouchStart(e: { touches: { clientX: any; }[]; }) {
    this.setData({
      tabStartX: e.touches[0].clientX,
      isTabDragging: true
    });
  },

  /**
   * 标签页触摸移动
   */
  onTabTouchMove(e: { touches: { clientX: any; }[]; }) {
    if (!this.data.isTabDragging) return;
    
    const currentX = e.touches[0].clientX;
    const deltaX = currentX - this.data.tabStartX;
    
    // 如果滑动距离足够大，切换标签页
    if (Math.abs(deltaX) > 50) {
      const { currentTab } = this.data;
      let newTab = currentTab;
      
      if (deltaX > 0 && currentTab > 0) {
        // 向右滑动，切换到上一个标签
        newTab = currentTab - 1;
      } else if (deltaX < 0 && currentTab < 2) {
        // 向左滑动，切换到下一个标签
        newTab = currentTab + 1;
      }
      
      if (newTab !== currentTab) {
        this.setData({
          currentTab: newTab,
          isTabDragging: false
        });
      }
    }
  },

  /**
   * 标签页触摸结束
   */
  onTabTouchEnd() {
    this.setData({
      isTabDragging: false
    });
  },

  /**
   * 跳转到剧本详情页面
   */
  navigateToScript(e: any) {
    const scriptId = e.currentTarget.dataset.scriptId;
    const scriptName = e.currentTarget.dataset.scriptName || '';
    const scriptImage = e.currentTarget.dataset.scriptImage || '';
    
    let url = `../MerchantIMScript/MerchantIMScript?scriptId=${scriptId}`;
    if (scriptName) {
      url += `&scriptName=${encodeURIComponent(scriptName)}`;
    }
    if (scriptImage) {
      url += `&scriptImage=${encodeURIComponent(scriptImage)}`;
    }
    
    wx.navigateTo({
      url: url
    });
  },

  /**
   * 显示详细信息弹窗
   */
  showDetailModal() {
    this.setData({
      showDetail: true
    });
  },

  /**
   * 关闭详细信息弹窗
   */
  closeDetailModal() {
    this.setData({
      showDetail: false
    });
  }
})